<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/jqGrid/ui.jqgrid.css">
    <link rel="stylesheet" href="static/common/css/jquery-ui.min.css">
    <link rel="stylesheet" href="static/common/css/jquery-ui.theme.min.css">
    <title>jqGrid Treegrid demo</title>
</head>
<body>
<div class="wrapper">
    <table id="tree"></table>
    <div id="pager"></div>
</div>
<script src="static/common/js/jquery-2.1.0.min.js"></script>
<script src="static/jqGrid/jquery.jqGrid.min.js"></script>
<script src="static/jqGrid/grid.locale-cn.js"></script>
<script type="text/javascript">
    $(function(){
        jQuery('#tree').jqGrid({
            "width":"780",
            "hoverrows":false,
            "viewrecords":false,
            "gridview":true,
            "url":"static/data/data1.json",
            "editurl" : "clientArray",
            "ExpandColumn":"name",
            "height":"auto",
            "sortname":"account_id",
            "scrollrows":true,
            "treeGrid":true,
            "treedatatype":"json",
            "treeGridModel":"adjacency",
            "loadonce":true,
            "rowNum":1000,
            "treeReader":{
                "parent_id_field":"parent_id",
                "level_field":"level",
                "leaf_field":"isLeaf",
                "expanded_field":"expanded",
                "loaded":"loaded",
                "icon_field":"icon"
            },
            "datatype":"json",
            "colModel":[
                {
                    "name":"account_id",
                    "key":true,
                    "hidden":true
                },{
                    "name":"name",
                    "label":"Name",
                    "width":170,
                    "editable":true
                },{
                    "name":"acc_num",
                    "label":"Number",
                    "width":170,
                    "editable":true
                },{
                    "name":"debit",
                    "sorttype":"numeric",
                    "label":"Debit",
                    "width":90,
                    "formatter": "number",
                    "align":"right",
                    "editable":true
                },{
                    "name":"credit",
                    "sorttype":"numeric",
                    "formatter": "number",
                    "label":"Credit",
                    "width":90,
                    "align":"right",
                    "editable":true
                },{
                    "name":"balance",
                    "sorttype":"numeric",
                    "formatter": "number",
                    "label":"Balance",
                    "width":90,
                    "align":"right",
                    "editable":true
                },{
                    "name":"parent_id",
                    "hidden":true
                }
            ],
            "pager":"#pager"
        });
        // nable add
        jQuery('#tree').jqGrid('navGrid','#pager',
                {
                    "edit":true,
                    "add":true,
                    "del":true,
                    "search":false,
                    "refresh":true,
                    "view":false,
                    "excel":false,
                    "pdf":false,
                    "csv":false,
                    "columns":false
                },
                {"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150},
                {"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150}
        );
        jQuery('#tree').jqGrid('bindKeys');
    });
</script>
</body>
</html>

